<template>
    <div class='head'>
        <div class="head-top">
            <div ref="maychar">

            </div>
            <div ref="maycharThree">

            </div>
        </div>
        <diV class="head-bottom">
            <div ref="maycharOne">

            </div>
        </diV>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
   components: {},
    data() {
        return {
            listOne:[],
            listTwo:[],
            listThree:[],
            listfou:[],
            Analyze_gradesData:[],
            Echarts_name:[],
        };
   },
//监听属性 类似于data概念
    computed: {},
//监控data中的数据变化
    watch: {},
    created() {
        this.classData()
    },
    mounted() {
        this.maycharTwo()
        // this.maycharThree()
    },
//方法集合
    methods: {
        classData() {
            this.get('/statistics/statisticsByClass?classId=14').then(res=>{
                if(res.code == 200){
                    console.log(res)
                    let avg_score = []
                    let counts = []
                    let fail_num = []
                    let max_score = []
                    let min_score = []
                    for(let val in res.data){
                        this.Echarts_name.push(val)
                        avg_score.push(res.data[val].avg_score.toFixed(2))
                        counts.push(res.data[val].counts)
                        fail_num.push(res.data[val].fail_num.toFixed(2))
                        max_score.push(res.data[val].max_score.toFixed(2))
                        min_score.push(res.data[val].pass_num.toFixed(2))
                    }
                    this.maychar(avg_score,counts,fail_num,max_score,min_score)
                    this.maycharThree(avg_score,counts,fail_num,max_score,min_score)
                }else{
                    this.Analyze_gradesData = []
                }
            })
        },
        maycharTwo() {
            let chartBox = echarts.init(this.$refs.maychar);
            let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow' 
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: ['一班级', '二班级', '三班级', '四班级',]
                    },
                    series: [
                        {
                            name: '优秀',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [320, 302, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '及格',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '有待提高',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                    ]
                };
            chartBox.setOption(option);
        },
        maychar(avg_score,counts,fail_num,max_score,min_score){
            let chartBox = echarts.init(this.$refs.maycharOne);
            let option = {
                    title: {
                        text: '考试分析'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {},
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: this.Echarts_name,
                            axisLabel: {
                                show: true,
                                fontSize: 10, 
                                interval: 0 
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '平均分',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: avg_score
                        },
                        {
                            name: '人数',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: counts
                        },
                        {
                            name: '最高分',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data:max_score
                        },
                    ]
                };
            chartBox.setOption(option);
        },
        maycharThree() {
            let chartBox = echarts.init(this.$refs.maycharThree);
            let option = {
                    title: {
                        text: '本期全体统计'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '本期学员',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 1048, name: '成绩优秀' },
                                { value: 735, name: '良好' },
                                { value: 580, name: '一般' },
                                { value: 484, name: '不及格' },
                                { value: 300, name: '较差' }
                            ]
                        }
                    ]
                };
            chartBox.setOption(option);
        }
    },

    //生命周期 - 创建之前 
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
}
</script>
<style  scoped>
.head-top div{
    width: 32%;
    height: 100%;
    background-color: #fff;
}
.head-top{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: space-between;
}
.head-bottom div{
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.head-bottom{
    width: 100%;
    height: 400px;
    margin-top: 2%;
    display: flex;
    justify-content: space-between;
}
.head{
    width:100%;
    height: 92%;
    background-color: #F5F7FA;
}
</style>